<template>
<div>
	<Card :bordered="false" dis-hover>
		<!-- container start -->
		<div class="container page-wrap w1250">
			<!-- 条件筛选 start -->
			<div class="screen-box">
				<!-- 位置 -->
				<city-filter @change="CityChanged" v-bind:province="search.Province" v-bind:city="search.City"></city-filter>
				<!-- 存储标准 -->
				<dl class="screen-box-list displayflex">
					<dt class="flexitem">存储标准：</dt>
					<dd>
						<a @click='searchBox("StorageType", "")' :class='{active:search.StorageType==""}'>不限</a>
						<a @click='searchBox("StorageType", "01")' :class='{active:search.StorageType=="01"}'>普通仓</a>
						<a @click='searchBox("StorageType", "02")' :class='{active:search.StorageType=="02"}'>恒温仓</a>
						<a @click='searchBox("StorageType", "03")' :class='{active:search.StorageType=="03"}'>冷藏仓</a>
						<a @click='searchBox("StorageType", "04")' :class='{active:search.StorageType=="04"}'>冷冻仓</a>
						<a @click='searchBox("StorageType", "05")' :class='{active:search.StorageType=="05"}'>多温仓</a>
						<a @click='searchBox("StorageType", "06")' :class='{active:search.StorageType=="06"}'>露天堆场</a>
						<a @click='searchBox("StorageType", "07")' :class='{active:search.StorageType=="07"}'>有棚堆场</a>
						<a @click='searchBox("StorageType", "08")' :class='{active:search.StorageType=="08"}'>危化品库</a>
						<a @click='searchBox("StorageType", "09")' :class='{active:search.StorageType=="09"}'>医药库</a>
						<a @click='searchBox("StorageType", "10")' :class='{active:search.StorageType=="10"}'>其他</a>
					</dd>
				</dl>
				<!-- 类型 -->
				<dl class="screen-box-list displayflex">
					<dt class="flexitem">类型：</dt>
					<dd>
						<a @click='searchBox("WareHouseType", "")' :class='{active:search.WareHouseType==""}'>不限</a>
						<a @click='searchBox("WareHouseType", "01")' :class='{active:search.WareHouseType=="01"}'>平库</a>
						<a @click='searchBox("WareHouseType", "02")' :class='{active:search.WareHouseType=="02"}'>高台库</a>
						<a @click='searchBox("WareHouseType", "03")' :class='{active:search.WareHouseType=="03"}'>楼库</a>
						<a @click='searchBox("WareHouseType", "04")' :class='{active:search.WareHouseType=="04"}'>地下仓库</a>
						<a @click='searchBox("WareHouseType", "05")' :class='{active:search.WareHouseType=="05"}'>立体库</a>
						<a @click='searchBox("WareHouseType", "06")' :class='{active:search.WareHouseType=="06"}'>坡道库</a>
						<a @click='searchBox("WareHouseType", "07")' :class='{active:search.WareHouseType=="07"}'>气体库</a>
					</dd>
				</dl>
				<!-- 面积 -->
				<dl class="screen-box-list displayflex">
					<dt class="flexitem">面积：</dt>
					<dd>
						<a @click='searchBox("TotalAreaAge", "")' :class='{active:search.TotalAreaAge==""}'>不限</a>
						<a @click='searchBox("TotalAreaAge", "1")' :class='{active:search.TotalAreaAge=="1"}'>≤1000平米</a>
						<a @click='searchBox("TotalAreaAge", "2")' :class='{active:search.TotalAreaAge=="2"}'>1000-5000平米</a>
						<a @click='searchBox("TotalAreaAge", "3")' :class='{active:search.TotalAreaAge=="3"}'>5000-10000平米</a>
						<a @click='searchBox("TotalAreaAge", "4")' :class='{active:search.TotalAreaAge=="4"}'>10000-20000平米</a>
						<a @click='searchBox("TotalAreaAge", "5")' :class='{active:search.TotalAreaAge=="5"}'>≥20000平米</a>
					</dd>
				</dl>
				<!-- 月台 -->
				<dl class="screen-box-list displayflex">
					<dt class="flexitem">月台：</dt>
					<dd>
						<a @click='searchBox("Platform", "")' :class='{active:search.Platform==""}'>不限</a>
						<a @click='searchBox("Platform", "1")' :class='{active:search.Platform=="1"}'>无月台</a>
						<a @click='searchBox("Platform", "2")' :class='{active:search.Platform=="2"}'>单面月台</a>
						<a @click='searchBox("Platform", "3")' :class='{active:search.Platform=="3"}'>双面月台</a>
						<a @click='searchBox("Platform", "4")' :class='{active:search.Platform=="4"}'>更多面月台</a>
					</dd>
				</dl>
				<!-- 消防 -->
				<dl class="screen-box-list displayflex" :class='{"hidden":state}'>
					<dt class="flexitem">消防：</dt>
					<dd>
						<a @click='searchBox("FireFighting", "")' :class='{active:search.FireFighting==""}'>不限</a>
						<a @click='searchBox("FireFighting", "1")' :class='{active:search.FireFighting=="1"}'>无</a>
						<a @click='searchBox("FireFighting", "2")' :class='{active:search.FireFighting=="2"}'>甲类</a>
						<a @click='searchBox("FireFighting", "3")' :class='{active:search.FireFighting=="3"}'>乙类</a>
						<a @click='searchBox("FireFighting", "4")' :class='{active:search.FireFighting=="4"}'>丙类</a>
						<a @click='searchBox("FireFighting", "5")' :class='{active:search.FireFighting=="5"}'>丁类</a>
						<a @click='searchBox("FireFighting", "6")' :class='{active:search.FireFighting=="6"}'>戊类</a>
						<a @click='searchBox("FireFighting", "7")' :class='{active:search.FireFighting=="7"}'>正在办理</a>
					</dd>
				</dl>
				<!-- 结构 -->
				<dl class="screen-box-list displayflex" :class='{"hidden":state}'>
					<dt class="flexitem">结构：</dt>
					<dd>
						<a @click='searchBox("BuildingStructure", "")' :class='{active:search.BuildingStructure==""}'>不限</a>
						<a @click='searchBox("BuildingStructure", "1")' :class='{active:search.BuildingStructure=="1"}'>砖瓦混合</a>
						<a @click='searchBox("BuildingStructure", "2")' :class='{active:search.BuildingStructure=="2"}'>轻钢结构</a>
						<a @click='searchBox("BuildingStructure", "3")' :class='{active:search.BuildingStructure=="3"}'>重钢结构</a>
						<a @click='searchBox("BuildingStructure", "4")' :class='{active:search.BuildingStructure=="4"}'>钢混结构</a>
					</dd>
				</dl>
				<!-- 层高 -->
				<dl class="screen-box-list displayflex" :class='{"hidden":state}'>
					<dt class="flexitem">层高：</dt>
					<dd>
						<a @click='searchBox("FloorHeight", "")' :class='{active:search.FloorHeight==""}'>不限</a>
						<a @click='searchBox("FloorHeight", "1")' :class='{active:search.FloorHeight=="1"}'>6米以下</a>
						<a @click='searchBox("FloorHeight", "2")' :class='{active:search.FloorHeight=="2"}'>6-9米</a>
						<a @click='searchBox("FloorHeight", "3")' :class='{active:search.FloorHeight=="3"}'>9-12米</a>
						<a @click='searchBox("FloorHeight", "4")' :class='{active:search.FloorHeight=="4"}'>12米以上</a>
					</dd>
				</dl>
				<!-- 租金 -->
				<dl class="screen-box-list displayflex">
					<dt class="flexitem">租金：</dt>
					<dd>
						<a @click='searchBox("LeasingPrice", "")' :class='{active:search.LeasingPrice==""}'>不限</a>
						<a @click='searchBox("LeasingPrice", "1")' :class='{active:search.LeasingPrice=="1"}'>≤15元/㎡/月</a>
						<a @click='searchBox("LeasingPrice", "2")' :class='{active:search.LeasingPrice=="2"}'>15-20元/㎡/月</a>
						<a @click='searchBox("LeasingPrice", "3")' :class='{active:search.LeasingPrice=="3"}'>20-25元/㎡/月</a>
						<a @click='searchBox("LeasingPrice", "4")' :class='{active:search.LeasingPrice=="4"}'>25-30元/㎡/月</a>
						<a @click='searchBox("LeasingPrice", "5")' :class='{active:search.LeasingPrice=="5"}'>≥30元/㎡/月</a>
					</dd>
				</dl>
				<div class="text-center">
					<a class="screen-btn" @click='state=!state'>更多选项（月台、消防、建筑类型、层高等） <i class="iconfont icon-expand" :class='{"hidden":!state}'></i></a>
				</div>
			</div>
			<!-- 排序 start -->
			<div class="page-title">
				<h2 class="data-record">当前共有<b>{{search.total}}</b>条仓库信息</h2>
			</div>
			<!-- 列表 start -->
			<div class="recommend-list-wrap">
				<dl class="recommend-list" v-for='item in list'>
					<dt class="recommend-img rela-img">
						<img :src="item.path">
					</dt>
					<dd class="recommend-text displayflex">
						<div class="recommend-text-info flex1">
							<h2>{{item.ChineseName}}</h2>
							<p class="address"><i class="iconfont icon-address"></i>{{item.Venue}}</p>
							<div class="progress-frame">
								<span>信息完整度</span>
								<div class="progress">
									<div class="progress-bar" :style="{ 'width': getDataIntegrity(item) }"></div>
								</div>
								<div class="progress-value">{{getDataIntegrity(item)}}</div>
							</div>
							<p>总面积 {{item.TotalAreaAge}}㎡ · 可租面积 <strong>{{item.CanRentedArea}}</strong> ㎡</p>
							<p>{{ item.WareHouseType | WareHouseType}} | {{item.StorageType | StorageType}} | {{item.Platform | Platform}} | {{item.BuildingStructure | BuildingStructure}} | {{item.FireFighting | FireFighting}} | 层高 {{item.FloorHeight | FloorHeight}}</p>
							<p>
								<b><i class="empty">空</i>{{item.checked}}</b>
							</p>
						</div>
						<div class="recommend-text-price flex1">
							<ul>
								<li>可租面积 <b class="red">{{item.CanRentedArea}}</b> ㎡</li>
								<li><b class="red">¥ <strong>{{item.LeasingPrice}}</strong></b> 起 <i>元/㎡/月</i></li>
								<!-- <li>元 / ㎡ / 月</li> -->
							</ul>
						</div>
						<div class="recommend-text-btn" style="padding-top: 73px;">
							<div class="btn-group flex1" v-show="false">
								<a href="#"><i class="iconfont icon-star-hollow"></i>关注仓库</a>
							</div>
							<div class="btn-group flex1">
								<a href="qq:59907980"><i class="iconfont icon-tel"></i>联系方式</a>
							</div>
							<div class="btn-group flex1" v-show="false">
								<a href="#"><input type="checkbox">加入咨询</a>
							</div>
							<div class="btn-group flex1">
								<a href="javascript:;" @click='detailGo(item.GUID)'><i class="iconfont icon-search" ></i>查看详情</a>
							</div>
						</div>
					</dd>
				</dl>
			</div>
			<!-- 页码 -->
			<Page show-total :page-size="search.pageSize" :current="search.PageIndex" :total="search.total" @on-change="changePage"></Page>
			<!-- 推荐需求 -->
			<div class="related-recommend">
				<div class="related-tit">
					<h2>推荐需求</h2>
				</div>
				<ul class="index-recommend-content">
					<li v-for='item in recommends'>
						<a @click='detailGo(item.GUID)'>
							<dt class="index-recommend-img rela-img">
								<img :src="item.path">
							</dt>
							<dd class="index-recommend-text">
								<div class="warehouse-name">
								<b>{{item.ChineseName}}</b>
								<span><strong>{{item.Minleasedrea}}</strong>元/m²/月 起</span>
								</div>
								<p class="iconfont icon-address-full">{{item.Venue}}</p>
								<div class="warehouse-info">
								<i>{{item.StorageType | StorageType}}</i>
								<i>{{ item.WareHouseType | WareHouseType}}</i>
								<i>可租 {{item.CanRentedArea}}m²</i>
								<!-- <em>临近高速</em> -->
								</div>
							</dd>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</Card>
</div>
</template>

<script>
import cityFilter from '@/components/layout/CityFilter.vue';

const checkProperties = [
	'LogCenterName', 'ChineseName', 'Contacts', 'ContactTel', 'WareHouseType',
	'TotalAreaAge', 'CanRentedArea', 'Minleasedrea', 'StorageType', 'LeasingPrice',
	'venue', 'Address', 'WarehouseIntroduction', 'Platform', 'BuildingStructure', 'FloorHeight',
	'FireFighting', 'ServiceRange', 'SecuritySystem', 'FireFightingSystem', 'GoodsCategory', 'PictContent'
];

export default {
	components: {
		'city-filter': cityFilter
	},
	data() {
		return {
			list: [],
			recommends: [],
			search: {
				Province: "",
				City: "",
				StorageType: "",
				WareHouseType: "",
				Platform: "",
				FireFighting: "",
				BuildingStructure: "",
				LeasingPrice: "",
				TotalAreaAge: "",
				minFloorHeight: 0,
				maxFloorHeight: 0,
				IsPublish: "Y",
				PageIndex: 1,
				pageSize: 10,
				total: 0,
				page: 1
			},
			state: true,
			datas: ""
		};
	},
	mounted() {
		let self = this;

		this.axios
			.post("/api/warehouse/search", {
				Province: "",
				City: "",
				IsPublish: "Y",
				PageIndex: 1,
				PageSize: 4
			})
			.then(function(res) {
				for (var a = 0; a < res.datas.length; a++) {
					if (res.datas[a].CanRentedArea > 0) {
						res.datas[a].checked = "未满租";
					} else {
						res.datas[a].checked = "已满租";
					}
				}

				res.datas.forEach(e => {
					e.PictContent = JSON.parse(e.PictContent);

					if (e.PictContent && e.PictContent.length > 0) {
						e.path = (e.PictContent.find(c => c && c.path) || {
							path: "/index-recommend02.jpg"
						}).path;
					} else {
						e.path = "/index-recommend02.jpg";
					}
				});

				self.recommends = res.datas;
			});
	},
	methods: {
		CityChanged(data) {
			this.search.Province = data.province;
			this.search.City = data.city;

			this.getData();
		},
		getData: function() {
			var self = this;
			if (self.search.FloorHeight == "") {
				self.search.minFloorHeight = 0;
				self.search.maxFloorHeight = "";
			} else if (self.search.FloorHeight == "1") {
				self.search.minFloorHeight = 0;
				self.search.maxFloorHeight = 6;
			} else if (self.search.FloorHeight == "2") {
				self.search.minFloorHeight = 6;
				self.search.maxFloorHeight = 9;
			} else if (self.search.FloorHeight == "3") {
				self.search.minFloorHeight = 9;
				self.search.maxFloorHeight = 12;
			} else if (self.search.FloorHeight == "4") {
				self.search.minFloorHeight = 12;
				self.search.maxFloorHeight = "";
			} else if (self.search.TotalAreaAge == "") {
				self.search.minTotalAreaAge = 0;
				self.search.maxTotalAreaAge = "";
			} else if (self.search.TotalAreaAge == "1") {
				self.search.minTotalAreaAge = 0;
				self.search.maxTotalAreaAge = 1000;
			} else if (self.search.TotalAreaAge == "2") {
				self.search.minTotalAreaAge = 1000;
				self.search.maxTotalAreaAge = 5000;
			} else if (self.search.TotalAreaAge == "3") {
				self.search.minTotalAreaAge = 5000;
				self.search.maxTotalAreaAge = 10000;
			} else if (self.search.TotalAreaAge == "4") {
				self.search.minTotalAreaAge = 10000;
				self.search.maxTotalAreaAge = 20000;
			} else if (self.search.TotalAreaAge == "5") {
				self.search.minTotalAreaAge = 20000;
				self.search.maxTotalAreaAge = "";
			} else if (self.search.LeasingPrice == "1") {
				self.search.minLeasingPrice = 0;
				self.search.maxLeasingPrice = 15;
			} else if (self.search.LeasingPrice == "2") {
				self.search.minLeasingPrice = 15;
				self.search.maxLeasingPrice = 20;
			} else if (self.search.LeasingPrice == "3") {
				self.search.minLeasingPrice = 20;
				self.search.maxLeasingPrice = 25;
			} else if (self.search.LeasingPrice == "4") {
				self.search.minLeasingPrice = 25;
				self.search.maxLeasingPrice = 30;
			} else if (self.search.LeasingPrice == "5") {
				self.search.minLeasingPrice = 30;
				self.search.maxLeasingPrice = "";
			}

			this.axios.post("/api/warehouse/search", self.search).then(function(res) {
				for (var a = 0; a < res.datas.length; a++) {
					if (res.datas[a].CanRentedArea > 0) {
						res.datas[a].checked = "未满租";
					} else {
						res.datas[a].checked = "已满租";
					}
				}

				res.datas.forEach(e => {
					e.PictContent = JSON.parse(e.PictContent);

					if (e.PictContent && e.PictContent.length > 0) {
						e.path = (e.PictContent.find(c => c && c.path) || {
							path: "/index-recommend02.jpg"
						}).path;
					} else {
						e.path = "/index-recommend02.jpg";
					}
				});

				self.list = res.datas;
				self.search.total = res.total;
			});
		},
		detailGo: function(GUID) {
			this.$router.push(`/front/warehouseDetail/${GUID}`);
		},
		changePage(pageNum) {
			this.search.PageIndex = pageNum;
			this.getData();
		},
		getDataIntegrity(val) {
			return (checkProperties.filter(c => val[c] && val[c].length > 0).length / checkProperties.length * 100).toFixed(0) + '%';
		},
		searchBox: function(propName, value) {
			this.search[propName] = value;
			this.getData();
		}
	},
	created() {
		this.search.Province = this.$route.query.Province;
		this.search.City = this.$route.query.City;
		this.search.TotalAreaAge = this.$route.query.TotalAreaAge;
		this.search.WareHouseType = this.$route.query.WareHouseType;

		this.getData();
	},
	activated() {
		this.created();
	}
};
</script>


